<script type="text/javascript" src="{$base_path}/js/easySlider1.5.js"></script>
{literal}
<script type="text/javascript" charset="utf-8">
// <![CDATA[
$(document).ready(function(){	
	$("#slider").easySlider({
		controlsBefore:	'<p id="controls">',
		controlsAfter:	'</p>',
		auto: true, 
		continuous: true
	});	
});
// ]]>
</script>
<style type="text/css">
#slider {
	margin:0;
	padding:0;
	list-style:none;
}
#slider ul, #slider li {
	margin:0;
	padding:0;
	list-style:none;
}
/* 
    define width and height of list item (slide)
    entire slider area will adjust according to the parameters provided here
*/
#slider li {
	width:964px;
	height:231px;
	overflow:hidden;
}
p#controls {
	margin:0;
	position:relative;
}
#prevBtn, #nextBtn {
	display:block;
	margin:0;
	overflow:hidden;
	width:84px;
	height:28px;
	position:absolute;
	left:758px;
	top:-36px;
}
#nextBtn {
	left:842px;
}
#prevBtn a {
	display:block;
	width:84px;
	height:28px;
	background:url(img/spacer.gif) no-repeat 0 0;
}
#nextBtn a {
	display:block;
	width:84px;
	height:28px;
	background:url(img/spacer.gif) no-repeat 0 0;
}
</style>
{/literal}